<!doctype html>
<html lang="en">
<head>
    <title>Code coverage report for components\tabs\dx-tabs.vue</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../../prettify.css" />
    <link rel="stylesheet" href="../../base.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type='text/css'>
        .coverage-summary .sorter {
            background-image: url(../../sort-arrow-sprite.png);
        }
    </style>
</head>
<body>
<div class='wrapper'>
  <div class='pad1'>
    <h1>
      <a href="../../index.html">all files</a> / <a href="index.html">components/tabs/</a> dx-tabs.vue
    </h1>
    <div class='clearfix'>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Statements</span>
        <span class='fraction'>0/29</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Branches</span>
        <span class='fraction'>0/10</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Functions</span>
        <span class='fraction'>0/2</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Lines</span>
        <span class='fraction'>0/28</span>
      </div>
    </div>
  </div>
  <div class='status-line low'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120</td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
  &lt;ul class="dx-tab"&gt;
    &lt;div class="dx-tab--active-bar" :style="barStyle"&gt;&lt;/div&gt;
    &lt;li 
      :class="{'is-active': select === index}" 
      class="dx-tab--item" 
      v-for="(item, index) in tabs" 
      :key="index" 
      :value="item.value" 
      @click="onTabClick(item, index)"
      ref="tab"&gt;{{ item.label }}&lt;/li&gt;
  &lt;/ul&gt;
&lt;/template&gt;
&lt;script&gt;
  export default {
		componentName: 'DxTabs',
		name: 'DxTabs',
    props: {
      value: {},
      tabs: Array
    },
    data() {
<span class="cstat-no" title="statement not covered" >      return {</span>
        // select: this.active
      }
    },
    methods: {
      onTabClick(tab, index) {
<span class="cstat-no" title="statement not covered" >        this.select = index</span>
<span class="cstat-no" title="statement not covered" >        this.$emit('input', tab.value)</span>
      }
    },
    computed: {
      select: {
        get() {
          let active = <span class="cstat-no" title="statement not covered" >0</span>
<span class="cstat-no" title="statement not covered" >          this.tabs.forEach((i, index) =&gt; <span class="fstat-no" title="function not covered" >{</span></span>
<span class="cstat-no" title="statement not covered" >            if (i.value === this.value) {</span>
<span class="cstat-no" title="statement not covered" >              active = index</span>
            }
          })
<span class="cstat-no" title="statement not covered" >          return active || 0</span>
        },
        set(val) {
        }
      },
      barStyle: {
        cache: false,
        get() {
<span class="cstat-no" title="statement not covered" >          if (!this.$refs.tab) <span class="cstat-no" title="statement not covered" >return</span></span>
          let style = <span class="cstat-no" title="statement not covered" >{}</span>
          let offset = <span class="cstat-no" title="statement not covered" >0</span>
          let tabSize = <span class="cstat-no" title="statement not covered" >0</span>
<span class="cstat-no" title="statement not covered" >          this.tabs.every((tab, index) =&gt; <span class="fstat-no" title="function not covered" >{</span></span>
            let $el = <span class="cstat-no" title="statement not covered" >this.$refs.tab[index]</span>
<span class="cstat-no" title="statement not covered" >            if (index !== this.select) {</span>
<span class="cstat-no" title="statement not covered" >              offset += $el[`clientWidth`]</span>
<span class="cstat-no" title="statement not covered" >              return true</span>
            } else {
<span class="cstat-no" title="statement not covered" >              tabSize = $el[`clientWidth`]</span>
              // 减去padding
<span class="cstat-no" title="statement not covered" >              if (this.tabs.length &gt; 1) {</span>
                // tabSize -= (index === 0 || index === this.tabs.length - 1) ? 28 : 28
                // FIMXE 这里是写了一半的像素值
<span class="cstat-no" title="statement not covered" >                tabSize -= 32</span>
              }
<span class="cstat-no" title="statement not covered" >              return false</span>
            }
          })
          // 移动位置可以使用像素值 因为已经是根据元素的实际值计算的
          const transform = <span class="cstat-no" title="statement not covered" >`translateX(${offset}px)`</span>
          // FIMXE 这里是写了像素值
<span class="cstat-no" title="statement not covered" >          style.width = tabSize + 'px'</span>
<span class="cstat-no" title="statement not covered" >          style.transform = transform</span>
<span class="cstat-no" title="statement not covered" >          style.msTransform = transform</span>
<span class="cstat-no" title="statement not covered" >          style.webkitTransform = transform</span>
<span class="cstat-no" title="statement not covered" >          return style</span>
        }
      }
    },
    mounted() {
<span class="cstat-no" title="statement not covered" >      this.$forceUpdate()</span>
    }
  }
&lt;/script&gt;
&lt;style scoped lang="scss"&gt;
  @include B(tab) {
    &amp;::-webkit-scrollbar { 
        display: none 
    }
    position: relative;
    padding-bottom: 1.4rem;
    width: 100%;
    overflow-x: scroll;
    // 父元素会根据字体撑开 需要设为0
    font-size: 0;
    white-space: nowrap;
    @include M(active-bar) {
        position: absolute;
        bottom: 0;
        left: 0;
        height: $--dx-tabs-active-bar-height;
        background-color: $--dx-tabs-active-background-color;
        border-radius: 0.4rem;
        z-index: 1;
        transition: transform .3s cubic-bezier(.645, .045, .355, 1);
        list-style: none;
    }
&nbsp;
    @include M(item) {
        color: $--dx-tabs-item-color;
        font-size: $--dx-tabs-item-font-size;
        display: inline-block;
        padding-right: $--dx-tabs-item-padding-right;
        @include when(active) {
            color: $--dx-tabs-active-color;
        }
    }
  }
&lt;/style&gt;</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
  Code coverage
  generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Feb 24 2019 15:08:50 GMT+0800 (中国标准时间)
</div>
</div>
<script src="../../prettify.js"></script>
<script>
window.onload = function () {
        if (typeof prettyPrint === 'function') {
            prettyPrint();
        }
};
</script>
<script src="../../sorter.js"></script>
</body>
</html>
